<template>
  <div>
    <div class="search-title">查询条件</div>
    <div class="search-box">
      <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm">
        <a-form-model-item label="字典描述" prop="dicDescription">
          <a-input v-model="searchForm.dicDescription" :allowClear=true placeholder="请输入字典描述"/>
        </a-form-model-item>
        <a-form-model-item label="字典类型" prop="dicNo" style="margin-right: 14px">
          <a-input v-model="searchForm.dicNo" :allowClear=true placeholder="请输入字典类型"/>
        </a-form-model-item>
        <a-form-model-item class="searchButton" >
          <a-button type="primary" @click="getSearch">查询</a-button>
          <a-button type="default" @click="restSearch('searchForm')">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="table-operation">
      <a-button type="primary" @click="addDict" icon="plus" v-if="QX.add">新增</a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      rowKey="dicNo"
      :scroll="{y: this.$getViewportSize().height-300 }">
      <span slot="type" slot-scope="text,record">
        <a @click="getDictItem(record)" style="color: #0092FC">{{record.dicNo}}</a>
      </span>
      <span slot="action" slot-scope="text,record">
        <a @click="editDict(record)" v-if="QX.edit"><a-icon class="iconBtn" type="edit"/>编辑</a>
        <a-divider v-if="QX.edit && QX.delete" type="vertical"/>
        <a-popconfirm
          title="确认是否删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="removeDict(record)"
        >
          <a v-if="QX.delete"><a-icon class="iconBtn"  type="delete" />删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <a-pagination
      show-size-changer
      :total="totalPage"
      :current="pageIndex"
      :pageSize="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="onChangePage"
      style="float: right;margin-top: 15px"
    />

    <a-modal centered="true" v-model="visible" :title="title" @ok="submitForm">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="form" class="lay-drawer-form">
        <a-form-model-item label="字典类型" prop="dicNo">
          <a-input v-model="form.dicNo" :disabled="disabled" placeholder="请输入字典类型" :maxLength="20"/>
        </a-form-model-item>
        <a-form-model-item label="字典描述" prop="dicDescription">
          <a-input v-model="form.dicDescription" placeholder="请输入字典描述" :maxLength="25"/>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" @click="visible=!visible">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="submitLoading" @click="submitForm">
          确定
        </a-button>
      </template>
    </a-modal>

  </div>
</template>

<script>
import {req} from "../../../api/axiosFun";
import preventBack from 'vue-prevent-browser-back';
export default {
  name: "Dict",
  mixins: [preventBack],//注入
  data() {
    return {
      QX: {},
      searchForm: {
        dicNo: '',
        dicDescription: '',
      },
      form: {
        dicNo: '',
        dicDescription: '',
      },
      title: '',
      visible: false,
      disabled: false,
      dataList: [],
      columns,
      rules,
      loading: false,
      submitLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      labelCol: {span: 4},
      wrapperCol: {span: 20},
    }
  },
  watch: {
    visible: function (newVal, oldVal) {
      if (!newVal) {
        this.restForm('form');
        this.disabled = false;
      }
    },
  },
  mounted() {
    this.getDictList();
  },
  methods: {
    getDictItem(record) {
      this.$router.push({
        path: '/dictItem',
        query:{
          dicNo:record.dicNo
        }
      })
      localStorage.setItem('dictSearchForm', JSON.stringify(this.searchForm));
      this.$store.commit('setInspectQX',this.QX)
    },
    //查询
    getSearch() {
      this.pageIndex = 1
      this.getDictList()
    },
    /* 重置查询 */
    restSearch(form) {
      this.restForm(form);
      this.pageIndex = 1
      this.getDictList();
    },
    /* 删除字典 */
    removeDict(record) {
      this.loading = true
      req("post", '/dict/removeDict', {
        dicNo: record.dicNo
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.$message.success(res.message);
          this.getDictList();
        }
      });
    },
    /* 新增字典 */
    addDict() {
      this.visible = true;
      this.title = '新增字典';
    },
    /* 编辑字典信息 */
    editDict(record) {
      this.disabled = true;
      this.title = '修改字典';
      this.loading = true
      req("post", '/dict/getDictByNo', {
        dicNo: record.dicNo
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.visible = true;
          let dict = res.data;
          this.$nextTick(() => {
            this.form.dicNo = dict.dicNo;
            this.form.dicDescription = dict.dicDescription;
          })
        }
      });
    },
    /* 保存or修改字典信息 */
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.title === '修改字典' ? 'updateDict' : 'addDict';
          this.submitLoading = true
          req("post", `/dict/${url}`, this.form).then(res => {
            if (res.result === 'success') {
              this.visible = false;
              this.$message.success(res.message);
              this.getDictList();
            }
            this.submitLoading = false
          });
        }
      });
    },
    /* 重置表单 */
    restForm(form) {
      this.$refs[form].resetFields();
    },
    /* 改变页数事件 */
    onChangePage(page, pageSize) {
      this.pageIndex = page;
      this.getDictList();
    },
    /* 改变每页显示条数 */
    onShowSizeChange(current, pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getDictList();
    },
    /* 数据字典列表 */
    getDictList() {
      this.loading = true;
      this.searchForm.page = this.pageIndex;
      this.searchForm.rows = this.pageSize;
      var searchForm = {}
      for (var key in this.searchForm) {
        searchForm[key] = this.searchForm[key]||''
      }
      req("post", `/dict/getDictListPage`, searchForm)
        .then(res => {
          if (res.result === 'success') {
            this.dataList = res.data;
            this.QX = res.QX;
            this.totalPage = res.page.totalResult;
            let operation = columns[columns.length - 1];
            if (!this.QX.add && !this.QX.edit && !this.QX.delete) {
              if (operation.title === '操作') {
                columns.splice(columns.length - 1, 1);
              }
            } else {
              if (operation.title !== '操作') {
                columns.push({
                  align: 'center',
                  title: '操作',
                  width: 150,
                  dataIndex: 'action',
                  key: 'action',
                  fixed: 'right',
                  scopedSlots: {customRender: 'action'},
                });
              }
            }
          }
          this.loading = false;
        }).catch(e => {
         this.loading = false;
      });
    },
  }
}
const rules = {
  dicNo: [
    {required: true, message: '请输入字典类型', trigger: 'blur'},
  ],
  dicDescription: [
    {required: true, message: '请输入字典描述', trigger: 'blur'},
  ],
};
const columns = [
  {
    title: '序号',
    width:'150px',
    align: 'center',
    customRender: (text, row, index) => {
      return index+1;
    },
  },
  {
    title: '字典描述',
    dataIndex: 'dicDescription',
    key: 'dicDescription',
  },
  {
    title: '字典类型',
    dataIndex: 'dicNo',
    key: 'dicNo',
    scopedSlots: {customRender: 'type'}
  },
  {
    title: '操作',
    width: 150,
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    scopedSlots: {customRender: 'action'},
  },
];
</script>

<style lang="less" scoped>
@import "../../../assets/css/maincss.css";
/deep/ .ant-table-tbody >tr.ant-table-expanded-row-level-1>td {
  padding: 0 0 2px 0;
}
</style>
